@CHARSET "UTF-8";


/* ====== body, htmlなど全体の設定 =======*/

	html {

		position		: relative;
		font-family		: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
		font-size		: 0.88em;
		width			: 100%;
		height			: 100%;

	}


	body {

		background-color: #fff;
		text-align		: left;
	    background-color: #ffffff;
		height			: auto !important; /*IE6対策*/
		height			: 100%; /*IE6対策*/
		line-height		: 150%;
		letter-spacin	: 0.5em;

		}



	#header, #contents, #bread {

		width		: 70%;
		margin		: 0 auto;

	}



/*================ 見出し	段落 線 ================*/

	h2{

		padding-left		: 5px;
		margin-bottom		: 20px;
		font-size			: 1.08em;
		border-left			: solid 5px red;

	}


	.articleTitle {

		text-align			: center;
		font-size			: 1.143em;
		font-color			: #333;
		border				: none;

	}


	.contentsTitle {

		text-align			: center;
		font-size			: 1.8rem;
		font-color			: #333;
		border				: none;
		margin-bottom		: 10px;

	}



	p {

		padding-left		: 10px;

	}


	hr {

	    border			: 0;
	    height			: 1px;
	    background-image: -webkit-linear-gradient(left, rgba(177,0,0,0), rgba(177,0,0,0.75), rgba(177,0,0,0));
	    background-image:    -moz-linear-gradient(left, rgba(177,0,0,0), rgba(177,0,0,0.75), rgba(177,0,0,0));
	    background-image:     -ms-linear-gradient(left, rgba(177,0,0,0), rgba(177,0,0,0.75), rgba(177,0,0,0));
	    background-image:      -o-linear-gradient(left, rgba(177,0,0,0), rgba(177,0,0,0.75), rgba(177,0,0,0));

	}


	.storong{

		text-align	: center;
		font-weight	: bold;

	}


	/*====================== ボタン =====================*/


		.editButton {
			text-align			: right;



		}

		.editButton a {

			padding		 		: 5px 0  0 20px;
			background-image	: url("../img/edit.png");
			background-repeat	: no-repeat;
			background-position	: left;
			width				: 70px;
			vertical-align		: top;
			color				: #666666;

		}


		.delButton {
			text-align			: right;



		}


		.delButton a {

			padding		 		: 5px 0  0 20px;
			background-image	: url("../img/x.gif");
			background-repeat	: no-repeat;
			background-position	: left;
			width				: 70px;
			vertical-align		: top;
			color				: #666666;

		}


	.reButton {

			margin		: 20px 0;
			text-align	: center;

	}

	.reButton a {

		-moz-box-shadow			: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
		-webkit-box-shadow		: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
		box-shadow				: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
		-webkit-border-radius	: 3px;
		-moz-border-radius		: 3px;
		border-radius			: 3px;
		padding					: 5px;
		text-shadow				: 0px -1px 1px rgba(255, 255, 255, 0.8);
		background-image		: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#aaa));
		background-image		: -webkit-linear-gradient(top, #ddd, #aaa);
		background-image		: -moz-linear-gradient(top, #ddd, #aaa);
		background-image		: -ms-linear-gradient(top, #ddd, #aaa);
		background-image		: -o-linear-gradient(top, #ddd, #aaa);
		background-image		: linear-gradient(top, #ddd, #aaa);


		/* IE6-9 */

		filter					: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ddd', endColorstr='#aaa',GradientType=0 );
		text-decoration			: none;
		color					: #000;

	}





	.submit {

		-moz-box-shadow			: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
		-webkit-box-shadow		: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
		box-shadow				: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
		-webkit-border-radius	: 3px;
		-moz-border-radius		: 3px;
		border-radius			: 3px;
		padding					: 3px;
		margin-top				: 10px;
		text-shadow				: 0px -1px 1px rgba(255, 255, 255, 0.8);
		background-image		: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#aaa));
		background-image		: -webkit-linear-gradient(top, #ddd, #aaa);
		background-image		: -moz-linear-gradient(top, #ddd, #aaa);
		background-image		: -ms-linear-gradient(top, #ddd, #aaa);
		background-image		: -o-linear-gradient(top, #ddd, #aaa);
		background-image		: linear-gradient(top, #ddd, #aaa);


		/* IE6-9 */

		filter					: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ddd', endColorstr='#aaa',GradientType=0 );
		width					: 60px;
		height					: 25px;
		text-align				: center;

	}




	.createButton a{

		-moz-box-shadow			: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
		-webkit-box-shadow		: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
		box-shadow				: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
		-webkit-border-radius	: 3px;
		-moz-border-radius		: 3px;
		border-radius			: 3px;
		padding					: 3px;
		margin-top				: 10px;
		text-shadow				: 0px -1px 1px rgba(255, 255, 255, 0.8);
		background-image		: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#aaa));
		background-image		: -webkit-linear-gradient(top, #ddd, #aaa);
		background-image		: -moz-linear-gradient(top, #ddd, #aaa);
		background-image		: -ms-linear-gradient(top, #ddd, #aaa);
		background-image		: -o-linear-gradient(top, #ddd, #aaa);
		background-image		: linear-gradient(top, #ddd, #aaa);


		/* IE6-9 */

		filter					: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ddd', endColorstr='#aaa',GradientType=0 );
		width					: 60px;
		height					: 25px;
		text-align				: center;
		text-decoration			: none;
		color					: #000;

	}




	/*-------------------- float clear -----------------------*/

		.clear:after {

		  content	: ".";
		  display	: block;
		  height	: 0;
		  clear		: both;
		  visibility: hidden;

		}


		.clear {

			min-height			: 1px;

		}


/* ====== header ====== */


	#header {

		height		: 50px;
		padding		: 20px;

	}

	#logout a {

		color				: #666666;
		vertical-align		: top;
		font-size			: 0.88em;
		float				: right;
		padding				: 20px 0 20px 20px;
		background-image	: url("../img/arrow2_e.png");
		background-repeat	: no-repeat;
		background-position	: left;
	}

	#header a:hover, a:active {

		color : red;

	}


	 #logo {

	 	float			: left;
	 }


	 #user {

		text-align			: right;

	}


	#header ul{

		float				: right;
	}


	#header li{

		float				: left;

	}






/*====== nav ======*/


	nav {

		background-color		: red;
	}


	nav ul {

		margin : 0 auto;
		width	: 750px;

	}


	nav li {

		float		: left;
		width		: 18%;
		text-align	: center;

	}



	nav a {
			  display 			: block;
			  padding 			: 10px 13px;
			  font-size			: 0.88em;
			  text-decoration	: none;
			  font-weight		: bold;
			  border-radius   	: 5px;
			  position        	: relative;
			  top				: 0;
			  color				: #ffffff;
			  transition		: all .4s;
			  text-shadow		: #444444 0 0 3px;
		}


	nav li:hover a {
			  top					: -20px;
			  color					: red;
			  background-color		: #fff;
			  box-shadow			: 0 0 7px 0 rgba(0, 0, 0, 0.3);
			  text-shadow			: #f6bfbc 0 0 3px;
			  transition			: all .4s;

		}

	nav li a:after {

			  display 		: block;
			  content 	 	: '';
			  position 		: absolute;
			  top			: 100%;
			  left			: 42%;
			  border-style	: solid;
			  border-color	: transparent;
			  border-width	: 5px 5px 0 5px;
			  transition	: all .4s;

		}

	nav li:hover a:after {

			  border-color : white transparent transparent transparent;
			  transition   : all .4s;
		}


	nav a .selected {

			  top				: -20px;
			  color				: #000000;
			  background-color	: #fff;
			  box-shadow 		: 0 0 5px 0 rgba(255, 255, 255, 0.7);
			  transition 		: all .4s;
		}


	nav a .selected:after {

			  border-color : white transparent transparent transparent;
			  transition   : all .4s;
		}



/*====== パンくずリスト ======*/

	#bread li {

		padding-right		: 10px;
		margin-top			: 20px;
		float				: left;
		list-style-image	: url("./img/arrow3.png");
		marker-offset		: 2em;
	}

	#bread a {

		margin-right	: 5px;
		color			: gray;
		font-size		: 0.85em;

	}


	#home {

		vertical-align		: top;
		font-size			: 0.88em;
		padding				: 20px 0 20px 20px;
		background-image	: url("../img/home.png");
		background-repeat	: no-repeat;
		background-position	: left;
	}



/*====== contents ======*/


	#contents{

		padding	: 20px;
		height	: 100%;
    	overflow: auto;

			}

	#contentsArea {

		float	: right;
		margin	: 0 20px;

	}


	#keyVisual {

		margin			: 0 10%;
		margin-bottom	: 20px;

	}


	/*---------- サブナビゲーション ----------*/

		#sabNav {

			float	: left;

		}


		#sabNav li {

			-moz-box-shadow			: inset 0 1px 0 rgba(200, 200, 200, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
			-webkit-box-shadow		: inset 0 1px 0 rgba(200, 200, 200, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
			box-shadow				: inset 0 1px 0 rgba(200, 200, 200, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);

			padding					: 15px 20px;
			background-color		: #333;

			text-shadow				: 0px -1px 1px rgba(0, 0, 0, 0.3);

			background-image		: -webkit-gradient(linear, left top, left bottom, from(#333), to(#444));
			background-image		: -webkit-linear-gradient(top, #333, #444);
			background-image		: -moz-linear-gradient(top, #333, #444);
			background-image		: -ms-linear-gradient(top, #333, #444);
			background-image		: -o-linear-gradient(top, #333, #444);
			background-image		: linear-gradient(top, #333, #444);

		}


		#sabNav a {

			font-weight		: bold;
			text-decoration	: none;
			color			: white;
			padding			: 15px 33px;


		}



		#sabNav li:hover {
				  color					: red;
				  background-image		: url("../img/bg028_10.gif");
				  transition   			: all .4s;

			}



/*====== お知らせ ======*/

	#notice {

		width			: 50%;
		float			: left;
		border-right	: solid 1px #888888;
		padding-right	: 0 20px;

	}


/*====== newArticle ======*/

	#newArticle {

		float		: left;
		width		: 40%;
		margin-left	: 20px;

	}




	/*------ form ------*/

		form {

			display					: inline-block;
			padding					: 15px;
			background-image		: url("../img/formbg.gif");
			-webkit-border-radius	: 3px;
			-moz-border-radius		: 3px;
			border-radius			: 3px;
			-moz-box-shadow			: inset 0 0 4px rgba(0,0,0,0.2);
			-webkit-box-shadow		: inset 0 0 4px rgba(0, 0, 0, 0.2);
			box-shadow				: inner 0 0 4px rgba(0, 0, 0, 0.2);


		}



	textarea, input {

		border					: 0;
		padding					: 5px;
		border					: solid 1px #ccc;
		margin					: 0 0 20px;
		width					: 500px;
		-webkit-border-radius	: 3px;
		-moz-border-radius		: 3px;
		border-radius			: 3px;

	}


	form{

			text-align	: center;

		}



		/*------------------- 返信用フォーム ----------------------*/


			.resform {

				display					: inline-block;
				padding					: 15px;
				background-image		: url("../img/bg_res.png");
				-webkit-border-radius	: 3px;
				-moz-border-radius		: 3px;
				border-radius			: 3px;
				-moz-box-shadow			: inset 0 0 4px rgba(0,0,0,0.3);
				-webkit-box-shadow		: inset 0 0 4px rgba(0, 0, 0, 0.3);
				box-shadow				: inner 0 0 4px rgba(0, 0, 0, 0.3);


			}



/*====== plofileテンプレート ======*/

	#myProf {

		width					: 600px;
		-webkit-border-radius	: 3px;
		-moz-border-radius		: 3px;
		border-radius			: 3px;
		-moz-box-shadow			: 0px 0px 6px rgba(0,0,0,0.3);
		-webkit-box-shadow		: 0px 0px 6px rgba(0, 0, 0, 0.3);
		box-shadow				: 0px 0px 6px rgba(0, 0, 0, 0.3);



	}

	#myProf tr td{


		padding			: 10px;
		border-bottom	: solid 1px rgba(200, 200, 200, 0.5);


	}

	#myProf th {


		font-size		: 1.08em;
		padding			: 20px;
		text-align		: center;
		border-bottom	: solid 1px rgba(200, 200, 200, 0.5);

	}



/*====== footer ======*/


	#footer {

		background-color	: #000000;
		text-align			: center;
		bottom				: 0;
		width				: 100%;
		padding				: 15px 0;
		color				: #ffffff;
		font-size			: 0.78em;

	}